<template>
	<view class="content">
		<view class="header">
			<view class="user">
				<view class="user-h">
					<text>安检员: {{ spotDetail.checkUser || '' }}</text>
					<text>站点: {{ spotDetail.name || '' }}</text>
				</view>
				<view class="sub-row">
					<view class="sub-row-cell">
						<text class="sub-row-cell-key">编号:</text>
						<text class="sub-row-cell-value">{{ spotDetail.vehicleCode }}</text>
					</view>
					<view class="sub-row-cell2">
						<text class="sub-row-cell-key">车牌号:</text>
						<text class="sub-row-cell-value">{{ spotDetail.plateNumber }}</text>
					</view>
				</view>
				<view class="sub-row">
					<view class="sub-row-cell">
						<text class="sub-row-cell-key">司机:</text>
						<text class="sub-row-cell-value">{{ spotDetail.driverName }}</text>
					</view>
					<view class="sub-row-cell2">
						<text class="sub-row-cell-key">线路:</text>
						<text class="sub-row-cell-value">{{ spotDetail.lineName }}</text>
					</view>
				</view>
				<view class="sub-row">
					<view class="sub-row-cell2">
						<text class="sub-row-cell-key">创建时间:</text>
						<text class="sub-row-cell-value">{{ spotDetail.checkOutTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="row">
			<view class="row-nav">行车三检</view>
			<view class="row-cell">
				<text style="color: ''">行车前检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" :value="checkOutThree.before || 0"></u-switch>
			</view>
			<view class="row-cell">
				<text style="color: ''">行车途中检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" :value="checkOutThree.mid || 0"></u-switch>
			</view>
			<view class="row-cell">
				<text style="color: ''">收车后中检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" :value="checkOutThree.after || 0"></u-switch>
			</view>
			<view class="row-nav">发车安全承诺</view>
			<view class="row-cell">
				<text style="color: ''">是否安全告知</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" :value="checkOutBefore.safe || 0"></u-switch>
			</view>
			<view class="row-cell">
				<text style="color: ''">是否督促系安全带</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" :value="checkOutBefore.belt || 0"></u-switch>
			</view>
			<view class="row-nav">站点载客统计</view>
			<view class="row-cell">
				<text>车辆核载人数</text>
				<u-number-box :value="spotDetail.vehicleSeats || 0" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上全票人数</text>
				<u-number-box :value="spotDetail.checkOutCnt1 || 0" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上半票人数</text>
				<u-number-box :value="spotDetail.checkOutCnt2 || 0" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上免票人数</text>
				<u-number-box :value="spotDetail.checkOutCnt3 || 0" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
		</view>
		<view class="footer" v-if="isView">
			<button @click="spotSign" :class="spotDetail.checkOutTime && !spotDetail.driverConfirm1 ? 'btn-commit' : 'btn-commit-no'" type="primary">
				{{ spotDetail.checkOutTime && !spotDetail.driverConfirm1 ? '签字确认' : '已确认签字' }}
			</button>
			<!-- <button class="btn-cancel" type="primary">退回修改</button> -->
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import globaljs from '@/api/global.js';
import common from '@/utils/common.js';
import signjs from '@/api/sign.js';
export default {
	computed: { ...mapGetters(['token']) },
	methods: {
		spotSign() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定无误签字吗',
				cancelText: '点错了',
				confirmText: '签字',
				success: async function (res) {
					if (res.confirm) {
						let param = {
							id: that.spotDetail.id,
							stationId: that.spotDetail.stationId,
							taskId: that.spotDetail.taskId,
							token: that.token,
							type: 2,
							lat: '',
							lon: ''
						};
						let res = await signjs.driverSign(param);
						if (common.httpIsWrong(res)) return;
						uni.showToast({
							icon: 'none',
							title: '签字成功',
							success() {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 500);
							}
						});
					}
				}
			});
		},
		async initPage(option) {
			this.isView = Number(option.isView || 1);
			let res = await globaljs.getSpotDetail(option.id, this.token);
			if (common.httpIsWrong(res)) return;
			this.spotDetail = res.json.data.data;
			this.checkOutThree = JSON.parse(this.spotDetail.checkOutThree);
			this.checkOutBefore = JSON.parse(this.spotDetail.checkOutBefore);
		}
	},
	onLoad(option) {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		this.initPage(option);
	},
	data() {
		return {
			isView: 1,
			spotDetail: null,
			checkOutThree: null,
			checkOutBefore: null,
			check1: 0,
			color1: 'black',
			check2: 0,
			color2: 'black',
			check3: 0,
			color3: 'black',
			check4: 0,
			color4: 'black',
			check5: 0,
			color5: 'black'
		};
	}
};
</script>

<style lang="scss">
uni-page-body,
page {
	background-color: #ffffff;
}
.content {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	overflow: scroll;
	padding-bottom: 110rpx;
	.header {
		width: 100%;
		background-color: #ffffff;
		pointer-events: none;
		.user {
			margin: 10rpx 10rpx;
			border: solid 1rpx #1a90e4;
			border-radius: 10rpx;
			.user-h {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				font-size: 30rpx;
				align-items: center;
				background-color: #3c9cff;
				color: white;
				height: 60rpx;
			}
			.sub-row {
				display: flex;
				align-items: center;
				margin: 20rpx 20rpx;
				font-size: 30rpx;
				.sub-row-cell {
					width: 40%;
				}
				.sub-row-cell2 {
					flex: 1;
				}
				.sub-row-cell-key {
					width: 400rpx;
					letter-spacing: 10rpx;
				}
				.sub-row-cell-value {
					color: #1a90e4;
					margin: 0 20rpx;
					letter-spacing: 4rpx;
				}
			}
			.cell {
				display: flex;
				width: 50%;
				height: 80rpx;
				display: flex;
				align-items: center;
				.cell-key-s {
					width: 150rpx;
					text-align-last: justify;
					color: #9de2ff;
				}
				.cell-key {
					width: 150rpx;
					color: #ffffff;
					text-align-last: justify;
				}
				.cell-value {
					flex: 1;
					border-bottom: solid 1rpx #ffffff;
					text-align: center;
					color: #55ffff;
				}
			}
		}
	}
	.row {
		width: 100%;
		pointer-events: none;
		.row-nav {
			display: flex;
			align-items: center;
			height: 90rpx;
			background-color: #d8e1ff;
			padding: 0 20rpx;
		}
		.row-cell {
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			justify-content: space-between;
			padding: 0 40rpx;
			.cell-num {
				border-bottom: solid 1px #dadada;
				width: 130rpx;
				text-align: right;
			}
		}
	}
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		.btn-commit {
			width: 98%;
			background-color: #1a90e4;
		}
		.btn-commit-no {
			width: 98%;
			background-color: #dfdfdf;
		}
		.btn-cancel {
			width: 48%;
			color: #1a90e4;
			background-color: white;
			border: solid 2rpx #1a90e4;
		}
	}
}
</style>
sss
